<template>
    <div class="cate-view">
        <!-- 导航栏 -->
        <cateNavbar :title="title"/>

        <!-- 搜索栏 -->
        <cateSearch @focus="onfocus"/>

        <!-- 分类列表 -->
         <!-- 保存列表的状态 -->
        <keep-alive>
          <cateList :cate="cate" :list="list" @sort-list="sortList" @add-cart="addCart1"/>
        </keep-alive>
        
        <!-- 提示组件 -->
        <van-toast v-model:show="show" style="padding: 5px 10px">
            <template #message>
                {{ message }}
            </template>
        </van-toast>
        
    </div>
</template>

<script setup lang="ts">
import cateNavbar from '@/components/dmx/cate-navbar.vue';
import cateSearch from '@/components/dmx/cate-search.vue';
import cateList from '@/components/dmx/cate-list.vue';
import axios from 'axios';
import { useCartStore } from '@/stores';
import { onBeforeMount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
// import { showToast } from 'vant';
// 引入路由
const router = useRouter();

// 标题
const title = ref("商品分类");

//获取焦点跳转搜索页
const onfocus = ()=>{
    router.push("/search");
}

//分类列表数据
const cate = ref([
    {id:'1',name:'热门商品'},
    {id:'2',name:'石斛枫斗'},
    {id:'3',name:'燕窝虫草'},
    {id:'4',name:'养生茶饮'},
    {id:'5',name:'预留分类'},
    {id:'6',name:'预留分类'},
    {id:'7',name:'预留分类'},
    {id:'8',name:'预留分类'},
    {id:'9',name:'预留分类'},
    {id:'10',name:'新品上市'},
    {id:'11',name:'特价专区'}
])
// const cate=ref([])
const list= ref([
    {cateid:1,id:'11',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科一次性防护口罩',oldPrice:29.00,newPrice:16.00,sales:999,stock:999},
    {cateid:1,id:'12',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:15.00,sales:9991,stock:999},
    {cateid:1,id:'13',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:14.00,sales:9992,stock:999},
    {cateid:1,id:'14',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:13.00,sales:9993,stock:999},
    {cateid:1,id:'15',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9994,stock:999},
    {cateid:1,id:'16',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9995,stock:999},
    {cateid:1,id:'17',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:18.00,sales:9999,stock:999},
    {cateid:1,id:'18',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9991,stock:999},
    {cateid:2,id:'21',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:19.00,sales:9993,stock:0},
    {cateid:2,id:'22',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9994,stock:0},
    {cateid:3,id:'31',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:20.00,sales:9995,stock:0},
    {cateid:3,id:'32',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9991,stock:0},
    {cateid:3,id:'33',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:30.00,sales:9992,stock:0},
    {cateid:3,id:'34',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:16.00,sales:9993,stock:0},
    {cateid:3,id:'35',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:25.00,sales:9994,stock:0},
    {cateid:3,id:'36',img:'src/assets/cate/v2_rzm87v.png',title:'医用外科口罩',oldPrice:29.00,newPrice:24.00,sales:9995,stock:0}

])
// const list=ref([])




//获取分类列表数据
const getCateList = async ()=>{
    const {data:{data,code}} = await axios.get('/api/dmx/cate')
    console.log(data);
    if(code==200){
        cate.value=data
    }
}
//获取商品列表数据
const getList = async ()=>{
    const {data:{data,code}} = await axios.get('/api/dmx/product')
    console.log(data);
    if(code==200){
        list.value=data.sort((a,b)=>a.cateid-b.cateid)
    }
}
getCateList()
getList()



//重新排序
const sortList = (item1: string)=>{
    if(item1=='com'){
        list.value=list.value.sort((a,b)=>b.id-a.id)
    }
    else if (item1=='priceAsc'){
        list.value=list.value.sort((a,b)=>a.newPrice-b.newPrice)
    }
    else if (item1=='priceDesc'){
        list.value=list.value.sort((a,b)=>b.newPrice-a.newPrice)
    }
    else if(item1=='count'){
        list.value=list.value.sort((a,b)=>b.sales-a.sales)
    }
    else if (item1=='stock'){
        list.value=list.value.filter(item=>item.stock>0)
    }
}

//从cartStore中获取数据
const cartStore = useCartStore();
const { addCart } = cartStore


//提示
const show = ref(false)
const message = ref('')
//添加到购物车
const addCart1 = (item:any)=>{
    console.log(item)
    if(item.stock>0){
        try {
            addCart({
                id:item._id,
                imgUrl:item.img,
                name:item.name,
                newPrice:item.newPrice,
                oldPrice:item.oldPrice,
                count:1,
                checked:true
            })
        }
        catch (error) {
            message.value = '添加购物车失败'
            show.value = true
            return
        }
        
        message.value = '添加购物车成功'
        show.value = true
    }
}
</script>

<style lang="scss" scoped>
.cate-view{
    width: 100vw;
    height: 100vh;
}



</style>